<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="a">
    <video id="video" controls preload="auto"></video>
</div>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script >
    $(function() {
        var video = document.querySelector('#video');
        var mediaSource = new MediaSource();
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);

        function sourceOpen(e) {
            URL.revokeObjectURL(video.src);
            // 设置 媒体的编码类型
            var mime = 'video/webm; codecs="vorbis,vp8"';
            var mediaSource = e.target;
            var sourceBuffer = mediaSource.addSourceBuffer(mime);
            var videoUrl = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
            fetch(videoUrl).then(function(response) {
                console.log(response);
                return response.arrayBuffer();
            })
                .then(function(arrayBuffer) {
                    sourceBuffer.addEventListener('updateend', function(e) {
                        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
                            mediaSource.endOfStream();
                            // 在数据请求完成后，我们需要调用 endOfStream()。它会改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。
                            video.play().then(function() {}).catch(function(err) {
                                console.log(err)
                            });
                        }
                    });
                    sourceBuffer.appendBuffer(arrayBuffer);
                });
        }
    })
</script>
</body>
</html>
